<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模拟一个数据监测</title>
</head>

<body>
  <div id="root">

  </div>

  <script>
    let data = {
      name: '尚硅谷',
      address: '北京'
    }

    // 创建一个监视的实例对象 ，用于监视data中属性的变化
    const obs = new Observer(data);

    const vm = {}
    vm._data = obs;

    function Observer(obj) {
      // 汇总对象中所有的属性形成一个数组
      const keys = Object.keys(obj);
      // 遍历
      keys.forEach(k => {
        Object.defineProperty(this, k, {
          get() {
            return obj[k];
          },
          set(val) {
            console.log(`${k}被修改了，开始解析模板，生成虚拟DOM......`)
            obj[k] = val;
          }
        })
      })
    }

  </script>
</body>

</html>